<template>
    <div>
        <!-- 筛选 -->
        <div id="query_params">
            <div class="table_name">
                {{ option.tableName }}
            </div>
            <div class="table_query">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="queryParams.search" @input="querytaskName" clearable>
                </el-input>
            </div>
            <div class="table_config">
                <el-popover placement="bottom" trigger="hover" popper-class="my_popover_style">
                    <div class="item">
                        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <template v-for="(item, index) in dropdownlist">
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckbox($event, item)">
                                <el-checkbox :label="item" />
                            </el-checkbox-group>
                        </template>
                    </div>
                    <i class="el-icon-finished" slot="reference"></i>
                </el-popover>
            </div>
            <div class="table_download" v-if="option.downloadItem && option.downloadItem.length">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        <i class="el-icon-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="item" v-for="(item, index) in option.downloadItem" :key="index">{{
                            downloadList[item] }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <template v-if="checkedCities && checkedCities.length">
            <!-- table -->
            <el-table 
            :data="tableData" 
            style="width: 100%;margin-bottom: 10px;" 
            border 
            :header-cell-style="getRowClass"
            :max-height="maxHeight" 
            :row-class-name="tableRowClassName" 
            v-loading="loading">
                <template v-for="item in tableList">
                    <el-table-column :prop="item.prop" :label="item.label" align="center" v-if="item.show">
                    </el-table-column>
                </template>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.pageSize"
                layout="->,total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </template>
        <template v-else>
            <el-empty description="暂无数据"></el-empty>
        </template>
    </div>
</template>

<script>
import { deepClone,throttle } from '@/utils';
export default {
    name: 'GenescloudUiIndex',

    data() {
        return {
            tableData: [],
            option: {},
            tableList: [],
            maxHeight: '600px',
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                search: null,
            },
            total: 0,
            dropdownlist: [],
            checkedCities: [],
            checkAll: true,
            downloadList: {
                "jpg": "JPG下载",
                "png": "PNG下载",
                "resultFile": "结果表格",
                "result": "结果文件",
                "svg": "SVG下载",
                "pdf": "PDF下载",
            },
            loading:true
        };
    },
    watch: {
        '$attrs.option': {
            handler(val, newVal) {
                if (val.tableList) {
                    this.init(val)
                    this.getList()
                }
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        setTimeout(() => {

            const event = document.createEvent('HTMLEvents');

            event.initEvent('resize', true, true);

            event.eventType = 'message'
            window.dispatchEvent(event);

        }, 100)
        window.addEventListener('resize', this.windowResize)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.windowResize)
    },
    mounted() {

    },

    methods: {
        getList() {
            this.loading = true
            setTimeout(()=>{
                this.loading = false
            },1000)
        },
        init(value) {
            this.option = deepClone(value)
            this.tableList = value.tableList.reduce((pre, item, index) => {
                pre.push({
                    ...item,
                    show: true
                })
                return pre
            }, [])
            this.dropdownlist = value.tableList.reduce((pre, item, index) => {
                pre.push(item.label)
                return pre
            }, [])
            this.checkedCities = deepClone(this.dropdownlist)
        },
        //限制条数
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList()
        },
        //翻页
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.getList()
        },
        //小选框
        handleCheckbox(value, command) {
            const item = this.tableList.find(i => i.label === command)
            item.show = !item.show
            if (value.length === this.dropdownlist.length) {
                this.checkAll = true
            } else {
                this.checkAll = false
            }
        },
        //全选框
        handleCheckAllChange(value) {
            this.tableList = this.tableList.reduce((pre, item, index) => {
                pre.push({
                    ...item,
                    show: value
                })
                return pre
            }, [])
            this.checkedCities = value ? this.dropdownlist : [];
        },
        //点击下载
        async handleCommand(downloadType) {
            let list = {
                'result': 'xls',
                'resultFile': 'zip',
                'jpg': 'jpg',
                'png': 'png',
                'svg': 'svg',
                'pdf': 'pdf'
            }
            // let pageCode = this.$router.history.current.name
            // let params = {
            //     pageCode,
            //     taskId: this.taskValue,
            //     downloadType,
            // }
            // const res = await downloadDrawFileRequest(params)
            // this.$dropDown(文件流,文件名)
        },
        windowResize() {
            let val = document.body.clientHeight
            this.maxHeight = (val - 300) + 'px'
        },
        //table 自定义表头
        getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return "background:#fafafa;font-weight: 400;color:#666;text-align:center";
            }
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'warning-row';
            }
            return '';
        },
         //筛选
         querytaskName: throttle(function () {
            this.getList()
        }, 500),
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table {
    .warning-row {
        background: #efefef;
    }
}

#query_params {
    height: 32px;
    line-height: 32px;
    display: flex;
    justify-content: flex-end;

    .table_name {
        font-size: 14px;
        color: #666;
    }

    ::v-deep .el-input {
        font-size: 12px;
        width: 150px;
        height: 30px;
        line-height: 30px;

        .el-input__inner {
            border-radius: 6px;
            background-color: #f0f0f0;
            height: 30px;
        }

        .el-input__icon {
            line-height: 30px;
        }
    }

    .table_config,
    .table_download {
        margin-left: 10px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        background-color: #f0f0f0;
        text-align: center;
        color: #666;
    }

    .table_query {
        margin-left: 10px;
    }
}

::v-deep .el-checkbox {
    padding: 5px;
}

.my_popover_style {
    .item {
        max-height: 200px;
        overflow-y: auto;
        // background-color: red;
    }
}
</style>